<template>
  <div>
    <el-button
      type="primary"
      size="small"
      style="margin-bottom: 20px"
      @click="visible = true"
    >添加区域</el-button>
    <custom-table
      :data="tableData"
      :columns="tableColumns"
      :total="total"
      :loading="loading"
      @changePage="handlerPageChange"
    >
      <!-- 自定义列模板 -->
      <template #operate="{ row }">
        <el-button type="text" @click="onEdit(row)">编辑</el-button>
        <el-button type="text" @click="onDel(row.id)">删除</el-button>
      </template>
    </custom-table>
    <el-dialog :title="areaInfo.id?'编辑区域':'添加区域'" :visible.sync="visible" width="width">
      <el-form
        ref="form"
        :model="areaInfo"
        label-position="top"
        :rules="rules"
      >
        <el-form-item label="区域名称" prop="areaName">
          <el-input v-model="areaInfo.areaName" placeholder="请输入区域名称" />
        </el-form-item>
        <el-form-item label="车位数（个）" prop="spaceNumber">
          <el-input-number
            v-model="areaInfo.spaceNumber"
            controls-position="right"
            :min="1"
            style="width: 100%; text-align: left"
            placeholder="请输入车位个数"
          />
        </el-form-item>
        <el-form-item label="面积（㎡）" prop="areaProportion">
          <el-input
            v-model.number="areaInfo.areaProportion"
            placeholder="请输入面积"
          />
        </el-form-item>
        <el-form-item label="关联计费规则" prop="ruleId">
          <el-select
            v-model="areaInfo.ruleId"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in ruleList"
              :key="item.ruleId"
              :label="item.ruleName"
              :value="item.ruleId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="areaInfo.remark"
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CustomTable from '@/components/CustomTable.vue'
import { addAreaAPI, delAreaAPI, getAreaListAPI, updateAreaAPI } from '@/api/area'
import { getRuleDropListAPI } from '@/api/rule'
import { onSecondConfirm } from '@/utils'
export default {
  components: { CustomTable },
  data() {
    return {
      visible: false,
      tableData: [],
      areaInfo: {
        areaName: '',
        spaceNumber: null,
        areaProportion: null,
        ruleId: null,
        remark: ''
      },
      ruleList: [],
      rules: {
        areaName: [
          { required: true, message: '请输入区域名称', trigger: 'blur' }
        ],
        areaProportion: [
          { required: true, message: '请输入面积', trigger: 'blur' },
          {
            pattern: /^[1-9]\d*$/,
            message: '请输入正整数',
            trigger: 'blur'
          }
        ],
        ruleId: [
          { required: true, message: '请选择关联计费规则', trigger: 'blur' }
        ],
        spaceNumber: [{ required: true, message: ' ', trigger: 'blur' }]
      },

      tableColumns: [
        { label: '区域名称', prop: 'areaName' },
        { label: '车位数(个)', prop: 'spaceNumber' },
        { label: '面积（㎡）', prop: 'areaProportion' },
        { label: '计费规则', prop: 'ruleName' },
        { label: '备注', prop: 'remark' },
        { label: '操作', prop: 'operate', custom: true }
      ],
      pageParams: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      loading: false
    }
  },
  watch: {
    visible(val) {
      if (val === false) {
        this.$refs.form.resetFields()
        this.areaInfo = {
          areaName: '',
          spaceNumber: null,
          areaProportion: null,
          ruleId: null,
          remark: ''
        }
      }
    }
  },
  created() {
    this.getList()
    this.getRuleList()
  },
  methods: {
    onEdit(row) {
      const { areaName, spaceNumber, areaProportion, ruleId, remark, id } = row
      this.areaInfo.areaName = areaName
      this.areaInfo.spaceNumber = spaceNumber
      this.areaInfo.areaProportion = areaProportion
      this.areaInfo.ruleId = ruleId
      this.areaInfo.remark = remark
      this.areaInfo.id = id
      this.visible = true
    },
    async onSubmit() {
      // 校验通过
      await this.$refs.form.validate()
      if (this.areaInfo.id) {
        await updateAreaAPI(this.areaInfo)
        this.$message.success('编辑成功!')
      } else {
        // 调api
        await addAreaAPI(this.areaInfo)
        // 提示用户
        this.$message.success('添加成功!')
      }
      // 刷新列表
      this.getList()
      // 清空表单
      this.visible = false
    },
    async getRuleList() {
      this.ruleList = await getRuleDropListAPI()
    },
    onDel(id) {
      onSecondConfirm({
        content: '是否确认删除当前区域?',
        handler: async() => {
          await delAreaAPI(id)
          this.$message.success('删除成功!')
          this.getList()
        }
      })
    },
    handlerPageChange(value) {
      this.pageParams = value
      // 分页变化处理
      // 重新getList
      this.getList()
    },
    async getList() {
      // 可以在请求前加loding传给子组件
      this.loading = true
      const res = await getAreaListAPI(this.pageParams)
      this.tableData = res.rows
      this.total = res.total
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>
